<!--
 * @Author: your name
 * @Date: 2021-09-06 22:39:07
 * @LastEditTime: 2021-09-07 08:52:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \musicapp\src\components\iconList.vue
-->
<template>
  <div class="iconList">
      <div class="iconItem">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jinrituijian"></use>
        </svg>
          <span>每日推荐</span>
      </div>
      <div class="iconItem">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-liebiao"></use>
        </svg>
          <span>私人FM</span>
      </div>
      <div class="iconItem">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gedan"></use>
        </svg>
          <span>歌单</span>
      </div>
      <div class="iconItem">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-paihangbang"></use>
        </svg>
          <span>排行榜</span>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>

    .iconList{
        width: 7.5rem;
        display: flex;
        justify-content: space-between;
        padding: 0.4rem;
        .iconItem{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .icon{
            width: 0.8rem;
            height: 0.8rem;
        }
        span {
            font-size: 0.26rem;
        }
    }
</style>